const gulp = require("gulp");
const sass = require("gulp-sass");
const minifyCSS = require("gulp-minify-css");
const postcss = require("gulp-postcss");
const concat = require("gulp-concat");
const cssImport = require("postcss-import");
const cssnext = require("postcss-cssnext");
const BrowserSync = require("browser-sync");
const uglify = require("gulp-uglify");
const browserSync = BrowserSync.create();
const connect = require("gulp-connect");
const autoprefixer = require("gulp-autoprefixer")
gulp.task('sass', function(){
  //sass()方法用于转换sass到css
  return gulp.src('./src/css/**/*.scss')
    .pipe(autoprefixer({
      browsers: ['last 4 versions'], //配置项
    }))
    .pipe(concat('main.style.css'))
    .pipe(sass({outputStyle: 'compressed'})) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.stream());
});
gulp.task("js", (cb) => {
  return gulp.src('./src/js/**/*.js')
    // .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
    .pipe(browserSync.stream());
});

gulp.task("html", (cb) => {
  return gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist/'))
    .pipe(browserSync.stream());
});
gulp.task("imgs", (cb) => {
  return gulp.src('./src/imgs/**/*')
    .pipe(gulp.dest('./dist/imgs'))
    .pipe(browserSync.stream());
});
gulp.task('connect', function () {
    connect.server({
      livereload: true
    });
 });
gulp.task("server", ["sass", "js", "html", "imgs", "connect"], () => {
  browserSync.init({
    server: {
      baseDir: "./dist"
    }
  });
  gulp.watch("./src/js/**/*.js", ["js"]);
  gulp.watch("./src/css/**/*.scss", ["sass"]);
  gulp.watch("./src/*.html", ["html"]);
});